<template>
    <div class="person">
        <h1>个人信息:</h1>
        <h1>姓名:{{ person.name }}</h1>
        <h1>年龄:{{ person.age }}</h1>
        <h1>性别:{{ person.sex }}</h1>
        <button @click="changeName">修改姓名</button>
        <button @click="changeSex">修改性别</button>
        <button @click="changeAge">修改年龄</button>
    </div>
</template>

<script lang="ts" setup name="Person">
import { ref,reactive,toRefs,toRef} from 'vue';
          //数据
        let person=reactive({name:"张三",age:18,sex:'男'})
        let {name,age,sex}=toRefs(person)
        let age_p=toRef(person,'age')

        function changeName(){
            name.value+='*'
        }
        function changeAge(){
            age.value+=1
        }
        function changeSex(){
            sex.value='女'
        }
</script>

<style>
    .person{
        background-color:skyblue;
        box-shadow:0 0 10px;
        border-radius:10px;
        padding:20px;
    }
    button{
        margin:0 5px;
    }
</style>